<template>
	<el-dialog :model-value="visible" width="40%" :z-index="12" @close="cancel">
		<template #header>
			<div class="custom-header">征求意见函填写</div>
		</template>

		<div class="boardBox">
			<el-form ref="queryForm" label-width="120px" class="mt20" :model="queryParams" :rules="rules">
				<el-row>
					<el-col :span="12">
						<el-form-item prop="postCode" label="标准编号:">
							<el-input v-model="queryParams.standardNumber" placeholder="标准编号" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item prop="postCode" label="标准名称:">
							<el-input v-model="queryParams.standardProjectName" placeholder="标准名称" disabled></el-input>
						</el-form-item>
					</el-col>
				</el-row>

				<el-form-item label="截止日期:" prop="solicitOpinionsDeadline">
					<el-date-picker
						v-model="queryParams.solicitOpinionsDeadline"
						type="date"
						value-format="YYYY-MM-DD HH:mm:ss"
						format="YYYY-MM-DD"
						:disabled="!ishandedit"
						@change="handleDateChange"
					/>
				</el-form-item>

				<el-form-item label="征求意见函:">
					<!-- //<el-input v-model="queryParams.solicitOpinionsComment" type="textarea" :disabled="!ishandedit" maxlength="300" :rows="5" /> -->
					<ma-editor v-if="ishandedit" v-model="queryParams.solicitOpinionsComment" placeholder="请输入..." :style="{ height: '300px' }"></ma-editor>

					<ma-editor
						v-else
						v-model="queryParams.solicitOpinionsComment"
						placeholder="请输入..."
						:style="{ height: '300px' }"
						:disabled="true"
					></ma-editor>
				</el-form-item>
			</el-form>
			<div v-if="ishandedit" class="dialog-footer">
				<el-button @click="cancel">取消</el-button>
				<el-button type="primary" @click="submit">保存</el-button>
			</div>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, watch, nextTick, onMounted } from 'vue'
import moment from 'moment'
import { ElMessage } from 'element-plus'

import { updateSolicitationApi, basicInfoApi, solicitationInfoApi } from '@/api/bianzhi/index'

const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	},

	ishandedit: {
		type: Boolean,
		default: false
	},

	datainfo: {
		type: Object,
		default: () => ({})
	}
})
const editorValue = ref('<p>maku</p>')
const deptoptions = ref([])
const job_modeoptions = ref([])
const filelist = reactive([])

const queryParams = ref({ standardProjectName: '', standardNumber: '', solicitOpinionsComment: '', solicitOpinionsDeadline: '' })
const searchData = ref({ standardProjectName: '', standardNumber: '', solicitOpinionsComment: '', solicitOpinionsDeadline: '' })

const emit = defineEmits<{ (event: 'update:visible', value: boolean): void; (event: 'chananniu', value: boolean): void }>()
// 获取表单引用
const queryForm = ref(null)
const uploadRef = ref(null)

const handleDateChange = val => {
	queryParams.value.solicitOpinionsDeadline = val || '' // 清空时重置为空数组
}
// 监听 localValue 的变化，通知父组件更新值
watch(
	() => props.visible,
	newValue => {
		if (newValue) {
			solicitationInfoApi({ id: props.datainfo.id }).then(res => {
				queryParams.value.solicitOpinionsDeadline = res.data.solicitOpinionsDeadline
				queryParams.value.solicitOpinionsComment = res.data.solicitOpinionsComment
				queryParams.value.standardNumber = res.data.standardNumber
				queryParams.value.standardProjectName = res.data.standardProjectName
			})
			// const data = { name: '', dept_id: '', position: '', hired_time: '', job_status: '', mobile: '', date: moment().format('YYYY-MM-DD') }
			// queryParams.value = data
		}
	}
)
const info = ref({ url: '', qrcode: '' })
const addvisible = ref(false)

const rules = reactive({
	solicitOpinionsComment: [{ required: true, message: '请输入内容', trigger: 'blur' }],
	solicitOpinionsDeadline: [{ required: true, message: '请选择时间', trigger: 'change' }]
})
const jobstatusoptions = ref([
	{ value: 1, name: '试用' },
	{ value: 2, name: '正式' }
])
const props1 = reactive({
	checkStrictly: true,
	emitPath: false,
	multiple: false,
	value: 'id',
	label: 'name',
	children: 'children'
})

onMounted(() => {})

const submit = () => {
	queryForm.value.validate(valid => {
		if (valid) {
			const data = {
				id: props.datainfo.id, //标准id
				solicitOpinionsDeadline: queryParams.value.solicitOpinionsDeadline, //意见截止日期
				solicitOpinionsComment: queryParams.value.solicitOpinionsComment //意见
			}

			updateSolicitationApi(data).then(res => {
				emit('update:visible', false)
				emit('chananniu', false)

				ElMessage.success('保存成功')
				queryParams.value = { ...searchData.value }
			})
		} else {
			console.log('error submit!!')
			return false
		}
	})
}
// const selectedArrRef = ref(null)
// function handleChange(value) {
// 	selectedArrRef.value.togglePopperVisible()
// }

function cancel() {
	emit('update:visible', false)
	emit('chananniu', false)
}
</script>

<style lang="scss" scoped>
.boardBox {
	display: flex;
	align-items: center;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-around;
	overflow-y: scroll;
	height: 100%;

	&::-webkit-scrollbar {
		display: none;
	}

	-ms-overflow-style: none;
	scrollbar-width: none;

	.tishi {
		font-size: 14px;
		color: #999;
		background-color: #f3f8fb;
		padding: 5px 10px;
		border-radius: 6px;
	}
}
</style>
